import popup from '../internal/mixins/popup';

export default {
  name: 'co-dialog',
  mixins: [popup],
  props: {
    title: String,
    dialogClass: String
  },
  methods: {
    handleWrapperClick (e) {
      if (this.$el !== e.target) return;
      this.overlayClick(e);
    }
  },
  render (h) {
    const hasHeaderSlots = this.$slots.header && this.$slots.header.length > 0;
    const isShowHeader = this.title || hasHeaderSlots;

    const dialogTitle = isShowHeader ? h('div', {
      staticClass: 'co-dialog-header'
    }, hasHeaderSlots ? this.$slots.header : this.title) : null;
    const dialogBody = h('div', {
      staticClass: 'co-dialog-body'
    }, this.$slots.default);
    const dialogActions = this.$slots.action && this.$slots.action.length > 0 ? h('div', {
      staticClass: 'co-dialog-actions',
      ref: 'footer'
    }, this.$slots.action) : undefined;

    const dialog = h('div', {
      staticClass: 'co-dialog ' + (this.dialogClass || ''),
      ref: 'dialog'
    }, [
      dialogTitle,
      dialogBody,
      dialogActions
    ]);

    return this.open ? h('transition', {
      props: {
        name: 'co-dialog-transition'
      }
    }, [
      h('div', {
        staticClass: 'co-dialog-wrapper',
        style: {
          'z-index': this.zIndex
        },
        on: {
          click: this.handleWrapperClick
        }
      }, [dialog])
    ]) : null;
  }
};
